// src/components/TodoList.jsx
import React, { useState } from 'react';
import { Input, Button, List, Modal, Form, message, Card } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import '../assets/TodoList.css'
const TodoList = () => {
    const [todos, setTodos] = useState([
        { id: 1, title: '学习 React', name: '张三', content: '熟悉 React 基本用法' },
        { id: 2, title: '了解 Ant Design', name: '李四', content: '掌握 antd 组件库' },
    ]);

    const [isModalVisible, setIsModalVisible] = useState(false);
    const [currentTodo, setCurrentTodo] = useState(null);
    const [form] = Form.useForm();

    // 保存（新增或编辑）
    const handleSave = () => {
        form.validateFields().then((values) => {
            if (currentTodo) {
                // 编辑任务
                setTodos((prev) =>
                    prev.map((todo) => (todo.id === currentTodo.id ? { ...todo, ...values } : todo))
                );
                message.success('任务更新成功！');
            } else {
                // 新增任务
                const newTodo = { id: Date.now(), ...values };
                setTodos((prev) => [...prev, newTodo]);
                message.success('任务新增成功！');
            }
            form.resetFields();
            setIsModalVisible(false);
            setCurrentTodo(null);
        });
    };

    // 删除任务
    const handleDelete = (id) => {
        setTodos((prev) => prev.filter((todo) => todo.id !== id));
        message.success('任务删除成功！');
    };

    // 编辑任务
    const handleEdit = (todo) => {
        setCurrentTodo(todo);
        form.setFieldsValue(todo);
        setIsModalVisible(true);
    };

    return (
        <div style={{ padding: 24 }}>
            <h1>TodoList</h1>
            <Button
                type="primary"
                icon={<PlusOutlined />}
                onClick={() => {
                    setCurrentTodo(null);
                    form.resetFields();
                    setIsModalVisible(true);
                }}
            >
                新增任务
            </Button>

            {/* 任务列表展示 */}
            <List
                style={{ marginTop: 16 }}
                grid={{ gutter: 16, column: 2 }}
                dataSource={todos}
                renderItem={(item) => (
                    <List.Item>
                        <Card
                            title={item.title}
                            extra={
                                <>
                                    <Button type="link" onClick={() => handleEdit(item)}>
                                        编辑
                                    </Button>
                                    <Button type="link" danger onClick={() => handleDelete(item.id)}>
                                        删除
                                    </Button>
                                </>
                            }
                        >
                            <p><strong>名字：</strong> {item.name}</p>
                            <p><strong>内容：</strong> {item.content}</p>
                        </Card>
                    </List.Item>
                )}
            />

            {/* 表单 Modal */}
            <Modal
                title={currentTodo ? '编辑任务' : '新增任务'}
                open={isModalVisible}
                onOk={handleSave}
                onCancel={() => {
                    setIsModalVisible(false);
                    form.resetFields();
                }}
            >
                <Form form={form} layout="vertical">
                    <Form.Item
                        name="title"
                        label="标题"
                        rules={[{ required: true, message: '请输入任务标题！' }]}
                    >
                        <Input placeholder="请输入标题" />
                    </Form.Item>
                    <Form.Item
                        name="name"
                        label="名字"
                        rules={[{ required: true, message: '请输入名字！' }]}
                    >
                        <Input placeholder="请输入名字" />
                    </Form.Item>
                    <Form.Item
                        name="content"
                        label="内容"
                        rules={[{ required: true, message: '请输入内容！' }]}
                    >
                        <Input.TextArea placeholder="请输入任务内容" rows={3} />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default TodoList;
